<template>
	<view class="page">
		<template v-if="token && isLogin">
			<view class="body">
				<view class="banner">
					<swiper
						class="swiper"
						:indicator-dots="swiper_option.indicatorDots"
						:autoplay="swiper_option.autoplay"
						:interval="swiper_option.interval"
						:duration="swiper_option.duration"
						circular="true"
					>
						<swiper-item v-for="(item, index) in 4" :key="index">
							<view class="swiper-item uni-bg-red"><image :src="old_host + '/images/wxapp_banner' + (index + 1) + '.jpg'" @error="handlerImg" mode="widthFix"></image></view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 引诱剂过期提醒 -->
				<view class="attractant-wran"> 
					<view class="icon"><image src="@/static/images/wran_icon.png" mode="widthFix"></image></view>
					<swiper
						class="swiper"
						:indicator-dots="attractant_swiper.indicatorDots"
						:autoplay="attractant_swiper.autoplay"
						:interval="attractant_swiper.interval"
						:duration="attractant_swiper.duration"
						:vertical="attractant_swiper.vertical"
						circular="true"
					>
						<swiper-item v-for="(item, index) in attractant_list" :key="index" class="item">
							<navigator
								:url="'/package_common/attractant/attractant?type=detail&dev_name=' + item.name + '&dev_id=' + item.data_device_id + '&dev_type=' + item.type"
								hover-class="none"
								class="name-bar"
							>
								<view v-if="item.status == 0" class="status s-1">引诱剂过期</view>
								<view v-else class="status s-2">引诱剂即将过期</view>
								<view class="name split">{{ item.name }}</view>
							</navigator>
							<!-- <navigator
								:url="'/package_common/attractant/attractant?type=detail&dev_name='+item.name+'&dev_id='+item.data_device_id+'&dev_type=1'"
								hover-class="none" class="btn ">查看详情</navigator> -->
						</swiper-item>
					</swiper>
				</view>

				<view class="hot-tool">
					<view class="item" v-for="(item, index) in dev_type" :key="index" @click="goList(item.number, index, item.id)">
						<view class="icon"><image :src="web_host + item.url_file.replace('/map','')" mode="widthFix"></image></view>
						<view class="name split">{{ item.name }}</view>
					</view>
				</view>
				<view class="title">设备地图</view>
				<view url="/package_common/map/map" hover-class="none" class="map-area" @click="goMap"><image src="@/static/images/map_bg.png" mode="widthFix"></image></view>
			</view>
		</template>
	</view>
</template>

<script>
import { HTTP_OLD_HOST, WEB_HOST } from '@/config.js';
import uniEcCanvas from '@/components/uni-ec-canvas.vue';
import * as echarts from '@/common/echart/echarts.js';
let chart = null;
export default {
	name: 'name',
	data() {
		return {
			appid: getApp().globalData.appid,
			isLogin: false,
			token: uni.getStorageSync('token'),
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			app_name: getApp().globalData.app_name,
			isSwitchTab: true,
			web_host: WEB_HOST,
			old_host: HTTP_OLD_HOST,
			ec: {
				lazyLoad: true
			},
			swiper_option: {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			},
			attractant_swiper: {
				vertical: true,
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500
			},
			attractant_list: [],
			dev_type: []
		};
	},
	async onLoad() {
		// console.log("onload")

		console.log('onload-start');
		if (this.token) {
			console.log('load', 1);
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				console.log('load', 2);
				this.getAttractantList();
				this.dev_type = await this.getDevType();
			} else {
				console.log('load', 4);
				this.isLogin = await this.$loginState('reset');
			}
		}
		console.log('onload-end');
	},
	async onShow() {
		console.log('show-start', this.isLogin, this.token);
		if (this.loginStateUpdate) {
			console.log('show', 1);
			this.userInfo = uni.getStorageSync('userInfo');
			this.token = uni.getStorageSync('token');
			this.isLogin = true;
			this.getAttractantList();
			this.dev_type = await this.getDevType();
			this.loginStateUpdate = false;
		}

		if (!this.token && !this.isLogin) {
			console.log('show', 2);
			this.isLogin = await this.$loginState('reset');
		}
		console.log('show-end');
	},

	methods: {
		handlerImg(e){
			console.log(e,'eee');
		},
		// 获取过期引诱剂
		getAttractantList: async function() {
			let res = await this.$api.tool_api.getAttractantList({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid
			});
			if (res.data.ret == 1000) {
				res.data.data.tn.forEach((item, index) => {
					if (Number(item.num) > 0) {
						item.status = 1; // 即将过期
					} else {
						item.status = 0; // 已过期
					}
					if (index <= 3) {
						this.attractant_list.push(item);
					}
				});

				res.data.data.xy.forEach((item, index) => {
					if (Number(item.num) > 0) {
						item.status = 1; // 即将过期
					} else {
						item.status = 0; // 已过期
					}
					if (index <= 3) {
						this.attractant_list.push(item);
					}
				});

				res.data.data.sy.forEach((item, index) => {
					if (Number(item.num) > 0) {
						item.status = 1; // 即将过期
					} else {
						item.status = 0; // 已过期
					}
					if (index <= 3) {
						this.attractant_list.push(item);
					}
				});
			}
		},

		// 获取设备类型
		getDevType: async function() {
			let res = await this.$api.tool_api.getDevTypeCount({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid
			});

			if (res.data.ret == 1000) {
				let data = [];
				res.data.data.forEach(item => {
					if (item.child.length > 0) {
						let has_dev = [];
						item.child.forEach(subitem => {
							if (subitem.count > 0) {
								has_dev.push(subitem);
								item.has_dev = has_dev;
							}
						});
					}
					if ((item.has_dev && item.has_dev.length > 0) || item.count > 0) {
						data.push(item);
					}
				});
				return data;
			}
		},

		goList: function(number, index, itemid) {
			let subnumber = '',
				name = '',
				id = '';
			this.dev_type.forEach((item, i) => {
				if (item.id == itemid) {
					if (item.has_dev && item.has_dev.length > 0) {
						subnumber = item.has_dev[0].number;
						name = item.has_dev[0].name;
						id = item.has_dev[0].id;
					}
					if (!item.has_dev && item.count > 0) {
						subnumber = item.number;
						name = item.name;
						id = item.id;
					}
				}
				// if (item.number == number) {
				// 	if (item.has_dev && item.has_dev.length > 0) {
				// 		subnumber = item.has_dev[0].number;
				// 		name = item.has_dev[0].name;
				// 		id = item.has_dev[0].id;
				// 	}
				// 	if (!item.has_dev && item.count > 0) {
				// 		subnumber = item.number;
				// 		name = item.name;
				// 		id = item.id;
				// 	}
				// }
			});
			console.log(number, subnumber, index, id);
			uni.navigateTo({
				url: `/package_common/list/list?dev_type=${subnumber}&dev_name=${name}&typeid=${id}&changetype=${index}-0`
			});
		},

		goMap: function() {
			let index = '',
				subnumber = '',
				name = '',
				id = '',
				url_file = '',
				dev_count = '';

			console.log(this.dev_type);
			if (this.dev_type[0].has_dev && this.dev_type[0].has_dev.length > 0) {
				subnumber = this.dev_type[0].has_dev[0].number;
				name = this.dev_type[0].has_dev[0].name;
				dev_count = this.dev_type[0].has_dev[0].count;
				url_file = this.dev_type[0].has_dev[0].url_file;
				id = this.dev_type[0].has_dev[0].id;
			}
			if (!this.dev_type[0].has_dev && this.dev_type[0].count > 0) {
				subnumber = this.dev_type[0].number;
				name = this.dev_type[0].name;
				dev_count = this.dev_type[0].count;
				url_file = this.dev_type[0].url_file;
				id = this.dev_type[0].id;
			}

			uni.navigateTo({
				url: `/package_common/map/map?dev_type=${subnumber}&dev_name=${name}&dev_count=${dev_count}&typeid=${id}&changetype=0-0&url_file=${url_file}`
			});

			// url=`/package_common/map/map?dev_type=${subnumber}&dev_name=${name}&dev_count=${dev_count}&typeid=${id}&changetype=${index}-${subindex}&url_file=${url_file}`
		}
	},
	components: {
		uniEcCanvas
	},

	computed: {
		loginUpdate() {
			return this.$store.state.loginStateUpdate;
		},
		yyjUpdate() {
			return this.$store.state.yyjUpdate;
		}
	},
	watch: {
		loginUpdate(newer, older) {
			if (newer) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
			}
		},

		async yyjUpdate(newer, older) {
			if (newer) {
				this.getAttractantList();
			}
		}
	}
};
</script>

<style lang="less">
.equ-map {
	height: 900rpx;
	background: #ccc;

	#map {
		width: 100%;
		height: 100%;
	}
}

.banner {
	.swiper {
		height: 350rpx;
	}

	image {
		width: 100%;
		vertical-align: bottom;
	}
}

.attractant-wran {
	display: flex;
	height: 80rpx;
	margin-bottom: 20rpx;
	background: #fff;

	.icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		flex-shrink: 0;
		margin-right: 10rpx;

		image {
			width: 50%;
		}
	}

	.swiper {
		flex-grow: 2;
		width: 80%;
		height: 80rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;

			.name-bar {
				display: flex;
				align-items: center;

				.name {
					max-width: 85%;
				}
			}

			.status {
				flex-shrink: 0;
				height: 40rpx;
				line-height: 40rpx;
				margin-right: 10rpx;
				padding: 0 5rpx;
				background: #0099ff;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
			}

			.s-2 {
				background: #ff9600;
			}

			.name {
			}

			.btn {
				flex-shrink: 0;
				margin-right: 20rpx;
				color: #09f;
			}
		}

		swiper-item {
		}
	}
}

.data-grid {
	width: 96%;
	margin: 20rpx auto;
	background: #ffffff;
	border-radius: 15rpx;

	.hd {
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.con {
		padding: 20rpx;
	}
}

.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
	display: block;
}

.hot-tool {
	display: flex;
	flex-wrap: wrap;
	padding: 30rpx 20rpx 0;
	background: #ffffff;

	.item {
		width: 21%;
		text-align: center;
		margin: 0 2% 30rpx;

		.icon {
			width: 50%;
			margin: 0 auto 10rpx;
		}

		.name {
			font-size: 28rpx;
		}
	}
}

.title {
	padding: 30rpx 20rpx;
	font-size: 30rpx;
	font-weight: bold;
}

.map-area {
	padding: 10rpx;
	margin: 0 20rpx;
	background: #ffffff;
	border-radius: 15rpx;

	image {
		border-radius: 15rpx;
	}
}
</style>
